<template>
  <div class="content">
    <div class="bubble bubble1">
      <img src="@/assets/bubble1.png" alt="" />
    </div>
    <div class="bubble bubble2">
      <img src="@/assets/bubble2.png" alt="" />
    </div>
    <h1>登录</h1>
    <h2>欢迎来到 歪fChat~</h2>
    <div class="form-content">
      <div class="form-group">
        <label for="username">账号:</label>
        <input type="text" id="username" placeholder="请输入您的手机号" autocomplete="off" v-model="phone"/>
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" placeholder="请输入您的密码" v-model="password"/>
      </div>
      <div class="login-btn" @click="login">
        <img src="@/assets/login_right.png" alt="">
      </div>
      <div class="register">没有账号? <router-link to="/register">去注册</router-link></div>
    </div>
    <div class="about-me">关于<span @click="aboutShow=true">《歪fChat》</span></div>
    <!-- 备案号 -->
    <div class="filing-number">
      <img src="@/assets/filing_icon.png" alt="">
      <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51200202000297" target="_blank">公安备案号：51200202000297</a>
      <span>&nbsp;&nbsp;</span>
      <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2023014574号</a>
    </div>
    <!-- 底部关于歪fChat弹出框 -->
    <van-overlay :show="aboutShow" @click="aboutShow=false">
        <div class="wrapper">
            <div class="block" @click.stop="aboutShow=true">
                <AboutWiFiChat/>
            </div>
        </div>
    </van-overlay>
  </div>
</template>

<script>
import AboutWiFiChat from '@/components/AboutWiFiChat'
import jwtdecode from "jwt-decode"
import { reqLogin } from '@/api'
import { Toast } from 'vant'
import { mapMutations } from 'vuex'
export default {
    components: {
        AboutWiFiChat
    },
    data() {
        return {
            aboutShow: false,
            phone: '',
            password: ''
        }
    },
    methods: {
        ...mapMutations('login', ['setUserInfo']),
        async login() {
            let { phone, password } = this
            if (!phone || !password) {
                Toast('账号密码不能为空')
                return
            }
            let userInfoObj = {
                phone,
                password
            }
            // loading动画
            const ToastLoading = Toast.loading({
              message: '登录中...'
            })
            let res = await reqLogin(userInfoObj)
            if (res.status === 200) {
                // 关闭动画
                ToastLoading.close()
                let token = jwtdecode(res.data.token)
                let userInfo = {
                    _id: res.data._id,
                    phone: token.phone,
                    token: res.data.token,
                    nick: res.data.nick,
                    imgUrl: res.data.imgUrl
                }
                // 存vuex
                this.setUserInfo(userInfo)
                // 存本地
                localStorage.setItem('userInfo', JSON.stringify(userInfo))
                Toast(res.msg)
                // 连接socket
                this.$socket.connect()
                this.$socket.emit('login', userInfo._id)
                this.$router.replace('/message')
            } else {
                Toast(res.msg)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100vh;
    padding: .2667rem .2667rem .1333rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}
h1 {
    font-size: .8rem;
    font-weight: 700;
    margin: 1.3rem .4rem 0;
}
h2 {
    font-size: .3rem;
    margin: .1333rem .4rem;
    color: #838383;
}
.bubble {
  position: absolute;
  img {
    width: 100%;
    height: 100%;
  }
}
.bubble1 {
  width: 4.5rem;
  height: 4.5rem;
  top: 0;
  right: 0;
}
.bubble2 {
  width: 1.3333rem;
  height: 5.3333rem;
  bottom: 0.6667rem;
  left: 0;
}
.form-content {
  width: 100%;
  flex: 1;
  padding: .5333rem .2667rem;
  box-sizing: border-box;
  border-radius: .5333rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  .form-group {
    margin-bottom: .8rem;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: .2rem;
    font-size: .4rem;
  }
  #username, #password {
    padding: .2667rem;
    border-radius: .1333rem;
    border: none;
    border-bottom: .04rem solid #838383;
    width: 100%;
    height: 1.2rem;
    box-sizing: border-box;
  }
  #username:focus, #password:focus {
    border: .0267rem solid #219de0;
  }
  .login-btn {
    width: 1.3333rem;
    height: 1.3333rem;
    border-radius: 50%;
    background-image: url('@/assets/login_btn.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 55%;
        height: 55%;
    }
  }
  .register {
    margin-top: .2667rem;
    align-self: center;
    color: #838383;
    a {
        color: #3aa3dc;
    }
  }
}
.about-me {
    width: 100%;
    height: .4rem;
    color: #838383;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
        color: #227bac;
    }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.block {
    width: 8rem;
    height: 13.3333rem;
    background-color: #fff;
    overflow: auto;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.block::-webkit-scrollbar {
    display: none;
}
::v-deep.van-overlay {
    background-color: rgba(0,0,0,.3);
}
.filing-number {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .1333rem;
  a {
    color: #227bac;
  }
}
</style>
